<template>
	<view class="container">
		<view class="app_name">
		   职多帮
		</view>
			<view class="user_account distance">
				<image src="../../static/img/login/account.png" mode="" class="phone_img"></image>
				<input v-model="form.phone" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请输入您的手机号" />
			</view>
			<view class="user_account distance">
				<image src="../../static/img/login/code.png" mode="" class="code_img"></image>
				<input v-model="form.code" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请输入您的验证码" />
				<view class="send_code" v-if="show" @click="getcode">
					发送验证码
				</view>
				<view class="send_code" v-if="!show">
					{{timer}}秒
				</view>
			</view>
			<view class="user_account distance">
				<image src="../../static/img/login/pwd.png" mode="" class="pwd_img"></image>
				<input type="password" v-model="form.password" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请输入您的密码" />
			</view>
			<view class="user_account">
				<image src="../../static/img/login/pwd.png" mode="" class="pwd_img"></image>
				<input type="password" v-model="form.surePass" class="uni-input" placeholder-style="color:#C5C5C5;font-size:28rpx" placeholder="请重复您的密码" />
			</view>
			<view class="login_btn" @click="regitser">
				立即注册
			</view>
			<view class="line_account">
				<view class="left_line">
					
				</view>
				<view class="">
					社交账号登录
				</view>
				<view class="right_line">
					
				</view>
			</view>
			<image src="../../static/img/login/weixin.png" mode="" class="weixin_img"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				timer:60,
				form:{
					phone:"",
					password:"",
					code:"",
					surePass:""
				}
			}
		},
		methods: {
			 getcode(){
			        this.show = false;
			              var auth_timer = setInterval(()=>{
			                this.timer--;
			                if(this.timer<=0){
			                  this.show= true;
			                  clearInterval(auth_timer)
			                }
			              },1000)
			     let data= {
			        phone:this.form.phone
			    }
			    this.$utils.notoken({url:'getCode',data:data,type:'post'}).then(res=>{
			    			if(res.code == 1 ){
			    				this.$utils.showLayer(res.message)
								this.form.code = "1234"
			    			}else{
			    				this.$utils.showLayer(res.message)
			    			}
			    		})
				
			    },
			regitser(){
				this.$utils.notoken({url:'register',data:this.form,type:'post'}).then(res=>{
						if(res.code == 1 ){
							this.$utils.showLayer(res.message)
							this.login()
						}else{
							this.$utils.showLayer(res.message)
						}
					})
				},
				login(){
					let data = {
						phone:this.form.phone,
						password:this.form.password
					}
					this.$utils.notoken({url:'login',data:data,type:'post'}).then(res=>{
							if(res.code === 1 ){
								this.$utils.showLayer(res.message)
								uni.setStorage({
									key:'userinfo',
									data: res.data
								})
								this.gettoken()
					
							}else{  
								this.$utils.showLayer(res.message)
							}
						})
				},
				gettoken(){
					this.$utils.notoken({url:'getToken',type:'post'}).then(res=>{
							if(res.code === 1 ){
								// this.$utils.showLayer(res.message)
								uni.setStorage({
									key:'token',
									data: res.data.accessToken
								})
								uni.navigateTo({
									url:'/pages/selsectIdentity/selsectIdentity'
								})
								
							}else{    
								this.$utils.showLayer(res.message)
							}
						})		
				}
		}
	}
</script>
<style>
	page {
		width:100%;
		height: 100%;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background-image: url("../../static/img/login/backgroundimg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;
		padding-top:300rpx;
		box-sizing: border-box;
	}
	.app_name{
		font-size: 104rpx;
		color:#FF9807;
		font-weight: bold;
		margin-bottom: 120rpx;
	}
	.user_account{
		width:561rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		display: flex;
          align-items: center;
		background-color: #F5F5F5;
		padding:0 40rpx;
		margin:0 auto;
		box-sizing: border-box;
		border-radius: 15rpx;
		font-size: 28rpx;
		text-align: left;
	}
	.user_account .phone_img{
		width:28rpx;
		height: 35rpx;
		
	}
	.user_account image{
		margin-right: 36rpx;
	}
	.user_account .code_img{
		width:35rpx;
		height: 37rpx;
	}
	.user_account .pwd_img{
		width:29rpx;
		height: 37rpx;
	}
	input{
		width:100%;	
		font-size: 28rpx;
		}
    .distance{
		margin-bottom: 30rpx;
	}
	.login_btn{
		width:560rpx;
		margin:0 auto;
		height: 88rpx;
		line-height: 88rpx;
		background:linear-gradient(0deg,rgba(255,160,8,1),rgba(255,131,5,1));
		box-shadow:0px 9rpx 13rpx 0px rgba(110,108,108,0.23);
		margin-top:60rpx;
		font-size: 30rpx;
		color:#fff;
		border-radius: 88rpx;
		margin-bottom: 70rpx;
	}
	.bottom_btn{
		font-size: 22rpx;
		color:#333333;
		display: flex;
		justify-content: space-between;
		margin:0 140rpx;
		margin-bottom: 50rpx;
	}
	.line_account{
		font-size: 22rpx;
		color:#9AACBD;
		display: flex;
		align-items: center;
		margin-left:142rpx;
		margin-bottom: 50rpx;
	}
	.line_account .left_line{
		width:145rpx;
		height: 1rpx;
		background-color: #f6f6f6;
		margin-right: 20rpx;
	}
	.line_account .right_line{
		width:145rpx;
		height: 1rpx;
		background-color: #f6f6f6;
		margin-left: 20rpx;
	}
	.weixin_img{
		width: 57rpx;
		height: 57rpx;
	}
	.send_code{
		font-size: 22rpx;
		color:#fff;
		background-color: #fd9103;
		width:240rpx;
		height: 46rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 46rpx;
		margin-right: -24rpx;
	}
</style>
